<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>手风琴效果</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,td,th,form,input,select,textarea{margin:0;padding:0; font-size:12px;}
a{text-decoration:none;outline:none;}
img{vertical-align:top;border:none;}
li{list-style:none;}
table{border-collapse:collapse;}
textarea{resize:none; outline:none; overflow:auto;}

.clear{zoom:1;}
.clear:after{content:''; display:block;clear:both;}
/* css reset */

#ul1{position:absolute;}
#ul1 li{position:absolute;left:0;top:0;}
#ul2{height:20px; position:absolute;top:140px;left:350px;}
#div1{width:490px;height:170px;margin:50px auto;border:2px solid #999;position:relative;overflow:hidden;}
#ul2 li{float:left;height:20px;line-height:20px;width:20px;background:#FFF;color:#FF8000;border:1px solid #999;text-align:center;margin:0 3px;}
#ul2 .active{color:#fff;background:#FF8000;}

#page{position:absolute;top:400px;left:50%;margin-left:-75px;}
#page li{float:left;width:30px;height:20px;}
#page li a{font-size:14px;}
#page li a:link{color:#000;}
#page li a:visited{color:#06F;}
#page li a:hover{text-decoration:underline;}
#page li a:active{color:#EF1B7A}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');
	var oUl=document.getElementById('ul1');
	var aLi=oUl.getElementsByTagName('li');
	var iPos=15;
	
	for(var i=1;i<aLi.length;i++){
		aLi[i].style.left=490-(5-i)*iPos+'px';		
	}
	for(var i=0;i<aLi.length;i++){
		aLi[i].index=i;
		aLi[i].onmouseover=function(){
			for(var j=0;j<aLi.length;j++){
				if(j<=this.index){
					startMove(aLi[j],{left:j*iPos});
				}else{
					startMove(aLi[j],{left:(490-(5-j)*iPos)});
				}
			
			}
		}		
	}
}

</script>
</head>

<body>
<div id="div1">
	<ul id="ul1">
        <li><img src="1.png" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="3.png" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
	</ul>
</div>
<ul id="page">
	<li><a href="1.html">【1】</a></li>
    <li><a href="2.html">【2】</a></li>
    <li><a href="3.html">【3】</a></li>
    <li><a href="#">【4】</a></li>
    <li><a href="5.html">【5】</a></li>
</ul>
</body>
</html>
